// tslint:disable-next-line:jsx-no-multiline-js

import React, { Component } from 'react';
import { ConnectState } from '@/models/connect';
import { connect } from 'dva';
import { Icon } from 'antd';
import styles from './index.css';
import { WsMsgItem } from '@/models/user';
import _ from 'lodash';
import { Dispatch, AnyAction } from 'redux';

interface WsMessageProps {
  wsMessages: WsMsgItem[];
  dispatch: Dispatch<AnyAction>
}

@connect(({ user, loading }: ConnectState) => ({
  submitting: loading.effects['login/login'],
  wsMessages: user.wsMessages,
}))
class WsMessage extends Component<WsMessageProps> {
  handleRemoveMsg = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/deleteWsMessage' });
  };
  render() {
    const { wsMessages } = this.props;
    return (
      <div>
        {_.map(wsMessages, (item: WsMsgItem) => (
          <div className={styles.msgBox}>
            <Icon className="cst-icon-close" type="close" onClick={this.handleRemoveMsg} />
            <img src={require('../assets/tip-icon.png')} alt="" srcset="" />
            <div style={{ width: '100%', color: '#FF674C' }}>{item.data}</div>
          </div>
        ))}
      </div>
    );
  }
}

export default WsMessage;
